<html>
  <head>
    <script type="text/tiscript">
      include "commondataprovider.tis";
      include "data-source.tis";
      include "vgrid.tis";
      
      function self.ready()
      {
        function onCurrentChange1( grid, row )
        {
          self#status1.text = String.printf("current row is %d", grid.index);
        }
        function onCurrentChange2( grid, row )
        {
          self#status2.text = String.printf("current row is %d", grid.index);
          stdout.printf("current row is %d\n", grid.index);
        }
        
        self#the-grid.onCurrentRowChanged.push(onCurrentChange1);
        self#the-grid.onCurrentRowChanged.push(onCurrentChange2);
        
        //var td = self#the-grid.select("thead th:first-child");
        //td.style#width = pr(60);        
      }
      
      self.select("input#test-col-width").onValueChanged = function()
      {
        var td = self.select("table thead th:nth-child(1)");
        td.style#width = px(this.value);
        stdout.$n(width={ this.value });
      }          
      
    </script>
    <style>
      @import "vgrid.css";
      widget.vgrid 
      {
        style-set: "virtual-grid";
        width:*;
        height:*;
      }
                  
      div.panel { background-image:url(theme:edit-normal); 
                  background-repeat:stretch; }
      p.status  { height:1.2em; border:1px solid red; 
                  overflow:hidden; /* to prevent remeasure on el.text = "something"; */ }
                  
      widget.vgrid tr.odd { background: #f6f6ff; }   
      
                  
    </style>
  </head>
<body>
  <frameset cols="200px,*">
    <div .panel>
      frameset is here for the testing purposes (resizing). Table on the right is looking on data source containing 10,000 records.
      <p>Change width of the third column to <input #test-col-width type="number" step=10 min=60 max=160/> px.</p>
      <p>Virtual grid supports sorting and row reordering.</p>
    </div>
    <widget.vgrid data-source="DataSource" #the-grid >
      <!-- <table></table>
           <widget type="vscrollbar" /> -->
    </widget>
  </frameset>  
  <p #status1 .status>&nbsp;</p>
  <p #status2 .status>&nbsp;</p>
</body>
</html>
